<template>
    <div class="admin-layout">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="@/assets/logo.png" alt="Logo" class="logo-img">
                <h2>志愿服务管理系统</h2>
            </div>
            <el-menu :default-active="activeMenu" class="sidebar-menu" @select="handleSelect" background-color="#304156"
                text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="analysis">
                    <el-icon><Bell /></el-icon>
                    <span>系统数据</span>
                </el-menu-item>
                <el-menu-item index="announcement">
                    <el-icon><Bell /></el-icon>
                    <span>公告管理</span>
                </el-menu-item>
                <el-menu-item index="carousel">
                    <el-icon><Picture /></el-icon>
                    <span>幻灯片管理</span>
                </el-menu-item>
                <el-menu-item index="style">
                    <el-icon><Star /></el-icon>
                    <span>风采管理</span>
                </el-menu-item>
                <el-menu-item index="media">
                    <el-icon><VideoCamera /></el-icon>
                    <span>媒体管理</span>
                </el-menu-item>
            </el-menu>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="header">
                <div class="breadcrumb">
                    <el-icon class="breadcrumb-icon"><Location /></el-icon>
                    <span class="breadcrumb-text">当前位置：</span>
                    <span class="breadcrumb-current">公告管理</span>
                </div>
                <div class="user-info">
                    <el-avatar size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            管理员 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="handleLogout">
                                    <el-icon><SwitchButton /></el-icon>
                                    <span>退出登录</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <!-- 表格区域 -->
            <div class="table-container">
                <div class="table-header">
                    <el-button type="primary" class="add-btn" @click="handleAdd">
                        <el-icon><Plus /></el-icon>新增公告
                    </el-button>
                </div>
                
                <el-table 
                    :data="announcements" 
                    style="width: 100%" 
                    border
                    stripe
                    highlight-current-row
                    class="custom-table">
                    <el-table-column prop="title" label="标题" width="300">
                        <template #default="scope">
                            <div class="title-cell">
                                <el-icon><Document /></el-icon>
                                <span>{{ scope.row.title }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发布时间" width="180">
                        <template #default="scope">
                            <div class="time-cell">
                                <el-icon><Calendar /></el-icon>
                                <span>{{ scope.row.createTime }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag 
                                :type="scope.row.status === 1 ? 'success' : 'info'"
                                effect="dark"
                                class="status-tag">
                                {{ scope.row.status === 1 ? '已发布' : '草稿' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <div class="operation-btns">
                                <el-button 
                                    type="primary" 
                                    size="small" 
                                    @click="handleEdit(scope.row)"
                                    class="edit-btn">
                                    <el-icon><Edit /></el-icon>编辑
                                </el-button>
                                <el-button 
                                    type="danger" 
                                    size="small" 
                                    @click="handleDelete(scope.row)"
                                    class="delete-btn">
                                    <el-icon><Delete /></el-icon>删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :total="total"
                        :page-sizes="[10, 20, 30, 50]"
                        layout="total, sizes, prev, pager, next"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import {
    Bell,
    Picture,
    Star,
    VideoCamera,
    ArrowDown,
    Location,
    SwitchButton,
    Plus,
    Document,
    Calendar,
    Edit,
    Delete
} from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('announcement')
const announcements = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const handleSelect = (key) => {
    router.push(`/admin/${key}`)
}

const handleLogout = () => {
    localStorage.clear()
    localStorage.removeItem('loginTable')
    router.push('/login')
}

const handleAdd = () => {
    // 处理新增公告
}

const handleEdit = (row) => {
    // 处理编辑公告
}

const handleDelete = (row) => {
    // 处理删除公告
}

const handleSizeChange = (val) => {
    pageSize.value = val
    fetchAnnouncements()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchAnnouncements()
}

const fetchAnnouncements = async () => {
    try {
        // 获取公告列表数据
        const response = await axios.get('http://localhost:9090/api/announcements', {
            params: {
                page: currentPage.value,
                size: pageSize.value
            }
        })
        announcements.value = response.data.records
        total.value = response.data.total
    } catch (error) {
        console.error('获取公告列表失败:', error)
    }
}

onMounted(() => {
    fetchAnnouncements()
})
</script>

<style scoped>
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background-color: #304156;
    color: white;
    box-shadow: 2px 0 6px rgba(0,0,0,0.1);
}

.logo {
    padding: 20px;
    text-align: center;
}

.logo-img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.logo h2 {
    font-size: 18px;
    margin: 0;
}

.main-content {
    flex: 1;
    padding: 20px;
    background-color: #f0f2f5;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.table-header {
    margin-bottom: 20px;
}

.add-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.custom-table {
    margin-bottom: 20px;
}

.title-cell, .time-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-tag {
    padding: 6px 12px;
}

.operation-btns {
    display: flex;
    gap: 10px;
}

.edit-btn, .delete-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sidebar-menu {
    border-right: none;
}

.el-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>
